<template>
	<view class="search">
		<toSafe :bgColor="'#fff'"></toSafe>
		<view class="searchInput">
			<view class="" @click="HandleReturn">
				<uni-icons type="left" size="30" style="margin-right: 20rpx;"></uni-icons>
			</view>
			<view class="search_icons">
				<view class="icon">
					<uni-icons type="search" size="20" color="#797979"></uni-icons>
				</view>
				<input class="uni-input" focus v-model="params.planName" placeholder="搜索维保任务、维修任务" />
				<view class="search" @click="getList">搜索</view>
			</view>
		</view>
		<!-- <scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="false" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="item" v-for="item in 6" :key="item">
				<view class="item-top">
					<text>2024/08/28 19:51</text>
					<text>待开始</text>
				</view>
				<view class="item-name">
					XXXXX公司
				</view>
				<view class="item-address">
					这是地址这是地址这是地址这是地址这是地址这是地址这是地址这是地址
				</view>
				<view class="item-time">
					<text>预约上门时间：</text>
					<text>2024/08/30 14:27</text>
				</view>
				<view class="item-type">
					维保名目
				</view>
				<view>
					维保要求的任务、要求,维保要求的任务、要求,维保要求的任务、要求,维保要求的任务、要求,超过2行顺延，展示完整
				</view>
				<view class="item-imgs">
					<image src="https://abc-img.jia.com/static/image/semtf/scheme_01.jpg" mode=""></image>
					<image src="https://abc-img.jia.com/static/image/semtf/scheme_02.jpg" mode=""></image>
				</view>
				<view class="item-btn">
					<up-button @click="change">修改上门时间</up-button>
					<button>我已到达</button>
				</view>
			</view>
		</scroll-view> -->
		<Tasks :type='0' :innerHeight="'88vh'" :lists="dataLists" :isLoading="isLoading"></Tasks>
		<view class="searchBox">
			<!-- <view class="history">
				<view class="title">
					<h3>历史记录</h3>
					<uni-icons type="trash" size="25"></uni-icons>
				</view>
				<div class="historyList">
					<view class="lists">
						<li>大明王朝1566</li>
						<li>大明王朝1566</li>
						<li>大明王朝1566</li>
						<li>大明王朝1566</li>
						<li>大明王朝1566</li>
						<li>大明王朝1566</li>
						<li>大明王朝1566</li>
						<li>大明王朝1566</li>
					</view>
				</div>
			</view> -->
		</view>
		<view>
			<up-datetime-picker :show="show" v-model="value1" mode="time" v-if="true"
				title="修改上门时间"></up-datetime-picker>
		</view>
	</view>
</template>

<script setup>
	import {
		getTaskLists
	} from '@/api/maintenance.js'
	import toSafe from '@/compoents/top-safe.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue';

	let show = ref(false);
	const value1 = ref(Date.now());
	let params = reactive({
		planName: ''
	})
	let dataLists = reactive([])
	let isLoading = ref(false)

	onLoad(() => {
		getList()
	})
	const change = () => {
		show.value = true
	}
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	// 获取所有维保任务
	const getList = () => {
		isLoading.value = true
		getTaskLists(params.planName).then(res => {
			if (res.code == 200) {
				dataLists.splice(0, dataLists.length, ...res.rows)
			}
			isLoading.value = false
		})
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.search {
		width: 100%;
		height: 100%;
		background: #F6F8FA;

		.searchInput {
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			// position: fixed;
			// top: 0;
			// left: 0;
			padding: 0 20rpx;
			z-index: 99;

			.search_icons {
				.inline_center();
				width: 88%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}
		}

		.scroll-Y {
			padding: 0 28rpx 40rpx 28rpx;
			height: 95vh;

			.item {
				margin-top: 20rpx;
				height: 642rpx;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 20rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.item-top {
					.inline_space_between();

					& text:nth-child(2) {
						font-size: 30rpx;
						color: #325EF5;
						font-weight: bold;
					}
				}

				.item-name,
				.item-type {
					font-size: 30rpx;
					color: #325EF5;
				}

				.item-time {
					.inline_space_between()
				}

				.item-imgs {
					display: flex;

					image {
						width: 94rpx;
						height: 94rpx;
						margin-right: 16rpx;
					}
				}

				.item-btn {
					display: flex;
					justify-content: flex-end;

					button {
						margin: 0 20rpx;
						width: 240rpx;
						height: 64rpx;
						line-height: 64rpx;
						border-radius: 12rpx;
					}

					button:nth-child(1) {
						background-color: #fff;
						border: 1px solid #325ef5;
						color: #325ef5;
						font-size: 28rpx;
					}

					button:nth-child(2) {
						background-color: #325ef5;
						border: 1px solid #325ef5;
						color: #fff;
						font-size: 28rpx;
					}

					.change-ok {
						opacity: 0.5;
					}
				}

			}
		}

		.uni-list {
			height: 80rpx;
		}
	}
</style>